<template>
	<div>
		<el-form :model="queryForm" :inline="true">
			<el-form-item>
				<el-input v-model="queryForm.title" clearable placeholder="标题"/>
			</el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		</el-form>
	</div>
	
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%;" stripe border highlight-current-row size="large">
	  <el-table-column prop="title" label="帖子标题" />
	  <el-table-column prop="coverImage" label="封面图" >
	  		<template #default="scope">
	  			<el-image :src="imageBaseUrl + scope.row.coverImage" style="width: 100%;" fit="contain" :preview-src-list="[imageBaseUrl + scope.row.coverImage]" preview-teleported/>
	  		</template>
	  </el-table-column>
	  <el-table-column prop="state" label="状态" :formatter="stateFormatter"/>
	  <el-table-column prop="views" label="浏览次数"/>
	  <el-table-column prop="createTime" label="发布时间" :formatter="formatterTime"/>
	  <el-table-column prop="updateTime" label="修改时间" :formatter="formatterTime"/>
	  <el-table-column label="操作" width="180">
	    <template #default="scope">
	  	<el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
		<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
	    </template>
	  </el-table-column>
	</el-table>
	<el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
		:page-sizes="[10, 20, 50]"
		@size-change="init"
		@current-change="init"
		v-model:page-size="queryForm.pageSize"
		v-model:current-page="queryForm.page"
		:total="totalData"
	/>
	</div>

</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue"
import { imageBaseUrl, formatterTime } from "@/global/index.js"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
	let result = await proxy.axios.post('forum/myList', params)
	if (!result) {
	  return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	window.open('detail/' + rowData.id)
}

const handleDelete = async (idx, rowData) => {
	ElMessageBox.confirm(
	    '确定要删除吗?',
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  )
		.then(() => {
			doDelete(rowData.id)
		})
}
const doDelete = async (id) => {
	let result = await proxy.axios.get('forum/delete?id=' + id)
	if (!result) {
	  return
	}
	proxy.msg.success('删除成功')
	init()
}

const handleCommentDelete = async (id) => {
	ElMessageBox.confirm(
	    '确定要删除吗?',
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  )
		.then(() => {
			doCommentDelete(id)
		})
}

const stateFormatter = (row, column, cellValue, index) => {
	if (cellValue === 0) {
		return '审核中'
	}
	if (cellValue === 1) {
		return '审核通过'
	}
	if (cellValue === 2) {
		return '审核拒绝'
	}
	return '未知状态'
}

</script>

<style>
</style>